<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript">
			// H5 plus事件处理
			function plusReady() {
				// 设置系统状态栏背景为透明
				plus.navigator.setStatusBarBackground('transparent');
				plus.navigator.setStatusBarStyle('dark');
				plus.screen.lockOrientation("portrait-primary");
				// 获取所有Webview窗口
				var wvs = plus.webview.all();
				for(var i = 0; i < wvs.length; i++) {
					console.log('webview' + i + ': ' + wvs[i].getURL());
					console.log('webview' + i + ': ' + wvs[i].id);
				}
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
		</script>
		<link href="css/bootstrap.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 菜单容器 -->
				<aside class="mui-off-canvas-left" style="background: white;  width: 60%;">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="unit" style="">
								<img src="images/zaihaizhuanti.png" class="img-responsive" style="" id="denglu">
								<p style="">民政部国家减灾中心</p>
							</div>
							<div style="" class="pull-right" id="bianjigerenxinxi">
								<img src="images/bianji.png" class="img-responsive" style="">
								<h6 class="mui-pull-left" style="">编辑个人信息</h6>
							</div>

							<div class="settings">
								<img src="images/tongzhi-1.png" class="img-responsive" style="">
								<h6 class="mui-pull-left" style="">通知</h6>
							</div>
							<div class="settings">
								<img src="images/xingxing.png" class="img-responsive" style="">
								<h6 class="mui-pull-left" style="">收藏</h6>
							</div>
							<div class="settings">
								<img src="images/shu.png" class="img-responsive" style="">
								<h6 class="mui-pull-left" style="">科普</h6>
							</div>
							<div class="settings">
								<img src="images/zuji.png" class="img-responsive" style="">
								<h6 class="mui-pull-left" style="">足迹</h6>
							</div>
							<div class="settings" id="tongxunlu">
								<img src="images/tongxunlu02.png" class="img-responsive" style="">
								<h6 class="mui-pull-left" style="">通讯录</h6>
							</div>
							<div style=" " id="shezhi">
								<h6 class="mui-pull-left" style="">设置</h6>
							</div>
						</div>
					</div>
				</aside>
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav" id="heand">
					<div id="cehua">
						<a>
							<img src="images/person0.5x.png" alt="" style="">
						</a>
						<h1 class="mui-title" style="">国家减灾中心业务产品展示平台</h1>
					</div>
				</header>

				<!-- 主页面内容容器 -->
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<div class="mui-content">
							<!-- 轮播器-->
							<div id="slider" class="mui-slider">
								<div class="mui-slider-group mui-slider-loop">
									<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="images/banner2.png">
										</a>
									</div>
									<!-- 第一张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="images/banner1.png">
										</a>
									</div>
									<!-- 第二张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="images/banner2.png">
										</a>
									</div>

									<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="images/banner1.png">
										</a>
									</div>
								</div>
								<div class="mui-slider-indicator">
									<div class="mui-indicator mui-active"></div>
									<div class="mui-indicator"></div>
								</div>
							</div>
							<!--四大灾种-->
							<div class="mui-content icon-gather enchantment">
								<div class="mui-row">
									<div class="mui-col-sm-3 mui-col-xs-3 ">
										<li class="mui-table-view-cell" id="dizhen">
											<a>
												<img src="images/earthquakenew.png">
												<p>地震</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/typhoonnew.png">
												<p>台风</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/waterfloodnew.png">
												<p>洪涝</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/ganhan@0.5x.png">
												<p>干旱</p>
											</a>
										</li>
									</div>
								</div>
							</div>
							<!--灾种信息-->
							<div class="mui-content icon-gather enchantment" id="zaizhongxinxi">
								<div class="mui-row">
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/Artboard 3.png">
												<p class="p-long">降水实况 <br /> /预报</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/newest.png" style="">
												<p>最新灾情</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell" id="yingjixiangying">
											<a>
												<img src="images/yingnjixiangying@0.5x.png">
												<p>应急响应</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/Artboard 3 Copy.png">
												<p class="p-long">年/月度 <br /> 灾情分析</p>
											</a>
										</li>
									</div>
								</div>
							</div>
							<div class="mui-content icon-gather enchantment" id="zaizhongxinxi1">
								<div class="mui-row">
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/nianduzaiqing@0.5x.png">
												<p>昨日灾情</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/yaoganjiance@0.5x.png">
												<p>遥感监测</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/pingguzhuanbao@0.5x.png">
												<p>评估专报</p>
											</a>
										</li>
									</div>
									<div class="mui-col-sm-3 mui-col-xs-3">
										<li class="mui-table-view-cell">
											<a>
												<img src="images/jiuziakuaibao@0.5x.png">
												<p>救灾快报</p>
											</a>
										</li>
									</div>
								</div>
							</div>
							<div class="mui-content jinniandizhen">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell mui-media">
										<a class="yingjicishu">
											<img class="mui-media-object mui-pull-left" src="images/emergency.png">
											<div class="mui-media-body" style="position: relative;" id="seismicStatistics">
											</div>
										</a>
									</li>
								</ul>
							</div>
							<div class="mui-content jinniandizhen">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell mui-media">
										<a class="dizhencishu">
											<img class="mui-media-object mui-pull-left" src="images/bottomearthquake.png">
											<div class="mui-media-body" style="position: relative;" id="earthquakeFrequency">

											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			mui.init();
			//侧滑事件
			mui(".mui-bar-nav").on("tap", "#cehua", function() {
				mui('.mui-off-canvas-wrap').offCanvas('show');
			});

			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
			});

			//跳转到地震页面
			document.getElementById("dizhen").addEventListener('tap', function(event) {
				mui.openWindow({
					url: 'yingjixiangying.html?dz',
					id: 'dizhen.html',
					show: {
						autoShow: true, //页面loaded事件发生后自动显示，默认为true
						aniShow: 'pop-in',
						duration: '100'
					},
					styles: {
						popGesture: 'none',
						hardwareAccelerated: true
					},
					waiting: {
						autoShow: true
					}
				});
			}, false);
			//跳转应急响应页面
			document.getElementById("yingjixiangying").addEventListener('tap', function(event) {
				mui.openWindow({
					url: 'yingjixiangying.html?yy',
					id: 'yingjixiangying.html',
					show: {
						autoShow: true, //页面loaded事件发生后自动显示，默认为true
						aniShow: 'pop-in',
						duration: '100'
					},
					styles: {
						popGesture: 'none',
						hardwareAccelerated: true
					},
					waiting: {
						autoShow: true
					}
				});
			}, false);

			//应急响应次数统计
			var indexIP = "59.173.238.34:3030";
			var seismicStatistics = document.querySelector("#seismicStatistics");
			var earthquakeFrequency = document.querySelector("#earthquakeFrequency");
			mui.ajax('http://' + indexIP + '/api/EmergRespon', {
				data: {
					"kind_code": "01",
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型    
				success: function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					var arrLevel = [0, 0, 0, 0];
					var level = ["Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ"];
					//						Ⅰ
					//						Ⅱ
					//						Ⅲ
					//						Ⅳ
					//						Ⅴ
					for(var i = 0; i < data.length; i++) {
						var respone_level = data[i]["data"]["respone_level"];
						switch(respone_level) {
							case '1':
								arrLevel[0]++;
								break;
							case '2':
								arrLevel[1]++;
								break;
							case '3':
								arrLevel[2]++;
								break;
							case '4':
								arrLevel[3]++;
								break;
						}
					}
					//					console.log(arrLevel);
					html = '<span style="color:black;">2017年国家救灾应急响应次数</span><br>';
					for(var i = arrLevel.length - 1; i >= 0; i--) {
						if(arrLevel[i] > 0) {
							html += '<span style="color:#8f8f94;">' + level[i] + '<h6 class="EarthquakeFrequency">' + arrLevel[i] + '</h6>次</span>';
						}
					};
					html += '<h4 class="mui-pull-right seismicStatistics">' + data.length + '次</h4>';
					seismicStatistics.innerHTML = html;

					console.log(new Date().getTime())
				}
			})
			//地震次数统计

			mui.ajax('http://' + indexIP + '/api/getDisaOfTime', {
				data: {
					"kind_code": "01",
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型    
				success: function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					var arrMag = [0, 0, 0, 0];
					var data = data[1]["data"];
					var sum = 0,
						html = '<span style="color:black;">2017年大陆地区发生4.0级以上地震次数</span><br>';
					//					console.log(data);
					for(var i = 0; i < data.length; i++) {
						var dataMag = data[i]["disaster_text"]["mag"];

						//			年份，以后做兼容
						//			var dataYear = data[i]["disaster_text"]["happen"].substring(0,4);
						//			console.log(dataYear);

						if(parseInt(dataMag) < 4) {
							continue;
						} else if(4 <= parseInt(dataMag) && parseInt(dataMag) < 5) {
							arrMag[0]++;
						} else if(5 <= parseInt(dataMag) && parseInt(dataMag) < 6) {
							arrMag[1]++;
						} else if(6 <= parseInt(dataMag) && parseInt(dataMag) < 7) {
							arrMag[2]++;
						} else if(7 <= parseInt(dataMag)) {
							arrMag[3]++;
						};
					}

					arrMag.forEach(function(v, i) {
						sum += v;
					});
					for(var i = 0; i < arrMag.length; i++) {
						if(arrMag[i] > 0) {
							if(i==3){
								html += '<span style="color:#8f8f94;">' + (i + 4) +'级以上<h6 class="EarthquakeFrequency">' + arrMag[i] + '</h6>次</span>';
							}else{
								html += '<span style="color:#8f8f94;">' + (i + 4) + '~' + (i + 5) + '级<h6 class="EarthquakeFrequency">' + arrMag[i] + '</h6>次</span>';
							}
						}
					};
					html += '<h4 class="mui-pull-right seismicStatistics">' + sum + '次</h4>';
					earthquakeFrequency.innerHTML = html;
					console.log(new Date().getTime())
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					console.log(type);
				}
			});
			console.log(new Date().getTime())
		</script>
	</body>
</html>